<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 未用组件 -->
  <!-- <div id="app">
    <div> {{count}} <button @click="add()">自增1</button></div>
    <div> {{count1}} <button @click="add1()">自增1</button></div>
    <div> {{count2}} <button @click="add2()">自增1</button></div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0,
        count1: 0,
        count2: 0
      },
      methods: {
        add () {
          this.count ++
        },
        add1 () {
          this.count1 ++
        },
        add2 () {
          this.count2 ++
        }
      }
    })
    // 每一块界面功能，用户自己的数据，和自己的函数，功能才能相互独立。
    // 但是：太多功能重复且相似的代码了，vue提出了组件化开发，优化这个问题。
  </script> -->

  <!-- 使用组件 -->
  <div id="app">
    <com-add></com-add>
    <com-add></com-add>
    <com-add></com-add>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 注册组件（vue实例）
    Vue.component('com-add',{
      template: `<div> {{count}} <button @click="add()">自增1</button></div>`,
      data () {
        return {
          count: 0
        }
      },
      methods: {
        add () {
          this.count ++
        }
      }
    })
    // vue实例
    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>